<template>
    <div>
        <el-upload
            multiple
            :limit="limit"
            :file-list="uploadFileList"
            :headers="headers"
            :action="url"
            :accept="accept"
            :before-upload="beforeUpload"
            :disabled="disabled"
            :on-success="fileUploadSuccess"
            :on-exceed="onExceed"
            list-type="picture-card"
            class="comp-event-file-upload"
            :class="{ 'is-disabled': disabled || uploadFileList.length >= limit }"
        >
            <i slot="default" class="el-icon-plus" style="font-size: 11px"></i>
            <template #file="{file}">
                <el-image :src="file.url || file.key" :alt="file.name" :fit="fit" style="width: 70px;height:70px">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>

                <div class="upload-error" v-if="file._status === 'error'">上传失败</div>
                <div class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlerPreview(file)" v-if="file._status !== 'error'">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span>
                    <span v-else class="el-upload-list__item-delete" @click="handlerDownload(file)"> <i class="el-icon-download"></i> </span>
                </div>
            </template>
        </el-upload>
    </div>
</template>

<script>
import FormValid from '@/components/form/FormValid'
import FileUploadMixin from './FileUploadMixin'
export default {
    name: 'EventFileUpload',
    mixins: [FileUploadMixin,FormValid],
    props: {
        value: String,
        fit: {
            type: String,
            default: 'cover'
        },
        parseValue: {
            type: Function,
            default: (value) => {
                return value.split(',').map((item) => ({ key: item, resourceType: '1' }))
            }
        },
        onSuccess: {
            type: Function,
            default: (response, file) => {
                Object.assign(file, { key: response.data.originUrl })
            }
        },
        formatValue: {
            type: Function,
            default: (files) => files.map((item) => item.key).join(',')
        }
    }
}
</script>
<style lang="scss" scoped>
.comp-event-file-upload {
    /deep/.el-upload-list {
        .el-upload-list__item {
            width: 70px;
            height: 70px;
            line-height: 70px;
            float: left;
            text-align: center;
            border: none;
            background-color: #f5f7fa;

            .iconfont {
                font-size: 30px;
                color: #1890ff;
            }

            .upload-error {
                position: absolute;
                bottom: 0px;
                width: 100%;
                height: 20px;
                text-align: center;
                background: rgba(0, 0, 0, 0.1);
                color: #ffa940;
                font-size: 12px;
                line-height: 20px;
            }

            .el-image__inner {
                width: 100%;
                height: 100%;
            }
        }
    }
    /deep/.el-upload--picture-card {
        width: 70px;
        height: 70px;
        line-height: 70px;
        float: left;
        background: #f5f7fa;
        border-color: #DCDFE6;
        &:hover {
          border-color: #C0C4CC;
        }
    }
    .el-upload-list__item-actions {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.7);
        .el-upload-list__item-delete {
            margin-left: 13px;
        }
    }
    .select {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 6px;
        border: 2px solid var(--theme);
        z-index: 1;
    }
}
.is-disabled {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
</style>
